<html>
  <head>
    <title>OpenLayers WMS Feature Info Example (GeoServer)</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script> 
    <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
<!--
    Yahoo is commented out because of the lack of an app id
    <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid="></script>
-->
    <style type="text/css">
    body {
        font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
        font-size: 80%;
        color: #222;
        background: #fff;
        margin: 1em 1.5em;
    }
    h1, h2, h3, h4, h5, h6 {
        color: #003a6b;
        background-color: transparent;
        font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
        margin: 0;
        padding-top: 0.5em;
    }
    h1 {
        font-size: 130%;
        margin-bottom: 0.5em;
        border-bottom: 1px solid #fcb100;
    }
    h2 {
        border-bottom: 1px outset #00b150;
    }
    .smallmap {
        width:  640px;
        height: 480px;
        border: 2px solid #ccc;
    }
    ul, li {
        padding-left: 0px;
        margin-left: 0px;
        list-style: none;
    }
    #info {
        position: absolute;
        top: 6em;
        left: 700px;
    }
    #info table td {
        border:1px solid #ddd;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        font-size: 90%;
        padding: .2em .1em;
        background:#fff;
    }
    #info table th{
        padding:.2em .2em;
            text-transform: uppercase;
            font-weight: bold;
            background: #eee;
    }
    tr.odd td {
            background:#eee;
    }
    table.featureInfo caption {
            text-align:left;
            font-size:100%;
            font-weight:bold;
            text-transform:uppercase;
            padding:.2em .2em;
    }
    </style>
    <script defer="defer" type="text/javascript">
    var map, infocontrols, highlightlayer;
    var wms_url = "/geoserver/wms"
    var wfs_url = "/geoserver/wfs"
    var lon = -122.67;
    var lon = -13655780; // sph merc
    var lat = 45.51;
    var lat = 5703559;   // sph merc
    var zoom = 14;
    var proj = 'EPSG:900913';

    function load() 
    {
        /**
         * The commercial layers (Google, Virtual Earth, and Yahoo) are
         * in a custom projection - we're calling this Spherical Mercator.
         * GeoServer understands that requests for EPSG:900913 should
         * match the projection for these commercial layers.  Note that
         * this is not a standard EPSG code - so, if you want to load
         * layers from another WMS, it will have to be configured to work
         * with this projection.  
         * (from GeoServer demo /geoserver/www/ol-demo.html)
         */
        var options = {
            // the "community" epsg code for spherical mercator
            projection: "EPSG:900913",

            // map horizontal units are meters
            units: "m",

            // this resolution displays the globe in one 256x256 pixel tile
            maxResolution: 78271.51695,

            // these are the bounds of the globe in sperical mercator
            maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508)
        };
        map = new OpenLayers.Map('map', options);

        var blConfig  = {'sphericalMercator': true};
        var ve        = new OpenLayers.Layer.VirtualEarth( "Bing", blConfig);
        blConfig.type = VEMapStyle.Aerial;
        var veHi      = new OpenLayers.Layer.VirtualEarth( "Bing Aerial", blConfig);
/*
        Yahoo is commented out because of the lack of an app id
        blConfig.type = YAHOO_MAP; ???
        var yahoo     = new OpenLayers.Layer.Yahoo( "Yahoo", blConfig);
        blConfig.type = YAHOO_MAP_HYB;
        var yahooHi   = new OpenLayers.Layer.Yahoo( "Yahoo Aerial", blConfig);
*/

        var lConfig = {transparent:true, format:'image/png8', srs:proj};
        var bConfig = {isBaseLayer:false, projection:proj, singleTile:true, ratio:1.65}
        lConfig.layers = 'gtfsdb:routes';
        var routes = new OpenLayers.Layer.WMS("Routes",
            wms_url,
            lConfig,
            bConfig
        );

        lConfig.layers = 'gtfsdb:stops';
        var stops = new OpenLayers.Layer.WMS("Stops",
            wms_url,
            lConfig,
            bConfig
        );

        highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
            displayInLayerSwitcher: false, 
            isBaseLayer: false 
            }
        );

        infoControls = {
            click: new OpenLayers.Control.WMSGetFeatureInfo({
                url:    wms_url,
                title:  'Identify features by clicking',
                layers: [stops, routes],
                queryVisible: true
            })
        }

        map.addLayers([/*yahoo, yahooHi,*/ ve, veHi, routes, stops, highlightLayer]); 
        for (var i in infoControls) { 
            infoControls[i].events.register("getfeatureinfo", this, showInfo);
            map.addControl(infoControls[i]); 
        }
        map.addControl(new OpenLayers.Control.LayerSwitcher());

        infoControls.click.activate();
        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

	// TODO - zoom to the first stop in our list
        // /geoserver/wfs?request=GetFeature&version=1.1.0&propertyName=&BBOX=-180,-90,180,90,EPSG:4326&MAXFEATURES=1&typeName=gtfsdb:stops
    }

    function showInfo(evt) {
        if (evt.features && evt.features.length) {
             highlightLayer.destroyFeatures();
             highlightLayer.addFeatures(evt.features);
             highlightLayer.redraw();
        } else {
            $('responseText').innerHTML = evt.text;
        }
    }
    </script>
  </head>
  <body onload="load()">
    <h1 id="title">gtfsdb routes & stops layers</h1>
    <div id="tags"></div>
    <p id="shortdesc">
      Demonstrates serving GTFS data layers from GeoServer as a WMS overlay atop a known basemap.
    </p>

    <div id="info">
        <h2>Stops & Route Details</h2>
        <div id="responseText">
          <p>Click on the map to get feature info.</p>
        </div>
    </div>
    <div id="map" class="smallmap"></div>
  </body>
</html>
